   <!-- dashboard -->
    <div id="col-top"></div>
    <div id="col" class="box">
    
         <div class="col-text">
               
				<div id="visualization" style="width: 880px; height: 400px"></div>

            </div> <!-- /col-text -->
    
    </div> <!-- /col -->
    <div id="col-bottom"></div>
    
    <hr class="noscreen" />
    
    <!-- 3 columns -->
    <div id="cols3-top"></div>
    <div id="cols3" class="box">
    
        <!-- Column I. -->
        <div class="col">

            <h3><a href="#">Least Contacting</a></h3>
            <div class="col-text">
                <ul class="ul-01">
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                </ul>

            </div> <!-- /col-text -->

            <div class="col-more"><a href="#"><img src="design/cols3-more.gif" alt="" /></a></div>

        </div> <!-- /col -->

        <hr class="noscreen" />

        <!-- Column II. -->
        <div class="col">

            <h3><a href="#">Most Contact</a></h3>

            <div class="col-text">
                <ul class="ul-01">
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                </ul>

            </div> <!-- /col-text -->

            <div class="col-more"><a href="#"><img src="design/cols3-more.gif" alt="" /></a></div>

        </div> <!-- /col -->

        <hr class="noscreen" />

        <!-- Column III. -->
        <div class="col last">

            <h3><a href="#">Contact By Map</a></h3>
            <div class="col-text">
               
				<div id="map_canvas" style="width: 265px; height: 120px"></div>

            </div> <!-- /col-text -->

            <div class="col-more"><a href="#"><img src="design/cols3-more.gif" alt="" /></a></div>

        </div> <!-- /col -->

        <hr class="noscreen" />
    
    </div> <!-- /cols3 -->
    <div id="cols3-bottom"></div>



    <hr class="noscreen" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=$map_api_key"></script>	
<script type="text/javascript">	 
google.load('visualization', '1', {packages: ['motionchart']});
function pageInitExit(){
	initializeChart();
	initMap();
}
function initializeChart(){
	var data = new google.visualization.DataTable();
	 data.addRows(8);
     data.addColumn('string', 'Subdistrict');
     data.addColumn('date', 'Date');
     data.addColumn('number', 'Price');
     data.addColumn('number', 'Rent');
     data.addColumn('string', 'Location');

     fillValue(data,0,'Tian Tong Yuan',new Date(2009,0,1),6000,1300,'Chang Ping');

     fillValue(data,1,'Tian Tong Yuan',new Date(2009,3,1),8000,1300,'Chang Ping');

     fillValue(data,2,'Tian Tong Yuan',new Date(2009,6,1),9000,1500,'Chang Ping');

     fillValue(data,3,'Tian Tong Yuan', new Date(2009,9,1),10000,1500,'Chang Ping');

     fillValue(data,4,'Zhong Guan Cun',new Date(2009,0,1),12000,1700,'Hai Dian');

     fillValue(data,5,'Zhong Guan Cun',new Date(2009,3,1),15000,1800,'Hai Dian');

     fillValue(data,6,'Zhong Guan Cun',new Date(2009,6,1),21000,1800,'Hai Dian');

     fillValue(data,7,'Zhong Guan Cun', new Date(2009,9,1),30000,1800,'Hai Dian');
    
     
     


  
    var motionchart = new google.visualization.MotionChart(
        document.getElementById('visualization'));
    motionchart.draw(data, {'width': 880, 'height': 400});
  }
  function fillValue(data,number,subdistrict,date,price,rent,location)
  {
      data.setValue(number,0,subdistrict);
      data.setValue(number,1,date);
      data.setValue(number,2,price);
      data.setValue(number,3,rent);
      data.setValue(number,4,location);
  }
function initMap(){
	    	if (GBrowserIsCompatible()) {
		        var map = new GMap2(document.getElementById("map_canvas"));
		        map.setCenter(new GLatLng(1.3559982755948157, 103.81942749023438), 13);
		    
		        // Add 10 markers to the map at random locations
		        var bounds = map.getBounds();
		        var southWest = bounds.getSouthWest();
		        var northEast = bounds.getNorthEast();
		        var lngSpan = northEast.lng() - southWest.lng();
		        var latSpan = northEast.lat() - southWest.lat();
		        for (var i = 0; i < 10; i++) {
		          var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
		                                  southWest.lng() + lngSpan * Math.random());
		          map.addOverlay(new GMarker(point));
		        }
		      } 
}   
</script>